<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="icon" type="image/png" href="../../static/favicon.ico" />

    <!-- 样式文件 -->
    <link rel="stylesheet" href="../../static/mobile/default/css/layout.css?v=2" />
    <link rel="stylesheet" href="../../static/assets/css/zpui.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/picker.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/userData.css" />

    <style>
        .header .header-right a img {
            width: .3733rem;
            height: .3733rem;
        }
        
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }
        
        .page-bd ul .twoli {
            height: .5333rem;
            line-height: .5333rem;
            margin: .2133rem .32rem;
        }
        
        .page-bd ul li {
            margin: .2133rem .32rem;
        }
        
        .page-bd ul li span {
            float: left;
            /* display: inline-block; */
            height: .5333rem;
            line-height: .5333rem;
            width: 15%;
            background-color: #dd127b;
            text-align: center;
            font-size: 0.213333rem;
            color: #fff;
        }
        
        .page-bd ul li input {
            float: left;
            width: 85%;
            height: .5333rem;
            line-height: .5333rem;
            border: .0133rem solid #ccc;
            padding: .1333rem;
            background-color: #dfdfdd;
            color: #7c7c7c;
        }
    </style>

    <title>记录分会培训 - 孝邻会</title>
</head>

<body>
    <!-- 整体页面部分 -->
    <div class="page">
        <!-- 页面头部 -->
        <div class="page-hd">
            <div class="header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">记录分会培训 - 孝邻会</div>
                <div class="header-right">
                    <a href="#">
                        <img src="../../static/assets/images/res/13.png" alt="">
                    </a>
                </div>
            </div>
        </div>

        <!-- 页面内容-->
        <div class="page-bd">
            <form id="userform">
                <ul>
                    <li class="twoli">
                        <span>时间</span>
                        <input type="text" name="trainTime" readonly />
                    </li>
                    <li class="twoli clearfix">
                        <span>地点</span>
                        <input type="text" name="addr" value="" readonly />
                    </li>

                    <li>
                        <p class="weui-uploader__title fs28 fw600">上传分会培训、记录时光</p>
                        <div class="uploading" style="display: block; ">
                            <div class="uploadBox" style="flex-wrap: wrap;overflow: initial;    display: flex;">
                                <ul class="weui-uploader__files uploaderFiles" id="uploaderFiles1">
                                </ul>
                                <div class="Box">
                                    <img src="../../static/mobile/default/images/addImg.png" alt="" class="imgBox">
                                    <input id="uploadInput" onchange="uploadFile(this,event)" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                                </div>
                                <input type="hidden" value="" name="picUrl" class="fs28 color_3 fw_b inputbox picUrl">
                                <div></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="weui-btn-area">
                            <a href="javascript:;" onclick="enterpost()" class="weui-btn weui-btn_primary">提交</a>
                        </div>
                    </li>
                </ul>
            </form>
        </div>
        <!-- 版权 -->
        <div class="copyright">
            Copyright © 达漂亮<br>
        </div>

    </div>

    <!-- alert弹窗部分 -->
    <div class="alertBox">
        <div class="alertBG"></div>
        <div class="alert">
            <div class="text fs30 color_3 bor_b">

            </div>
            <!-- 单按钮 -->
            <div class="button fs32 fw_b color_r">
                知道了
            </div>
            <!-- 双按钮 -->
            <div class="buttonBox fs32 fw_b">
                <span class="color_9 bor_r cancel">取消</span>
                <span class="color_r confirm">确定</span>
            </div>
        </div>
    </div>

    <!-- 脚本文件 -->
    <script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
    <script src="../../static/assets/js/jquery-weui.min.js"></script>
    <script src="../../static/assets/js/lib/fastclick.js"></script>
    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/mobile/default/js/page.js?v=1"></script>

    <script src="../../static/mobile/default/js/datePicker.js"></script>
    <script src="../../static/mobile/default/js/picker.min.js"></script>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=modT4a0HDG3OGLyvXagGH1QRuRnYBPGO&s=1"></script>
    <!-- 页面js部分 -->
    <script>
        // 获取当前日期时间
        function getDatetime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hh = now.getHours();
            var mm = now.getMinutes();
            var ss = now.getSeconds();
            var clock = year + "-";
            if (month < 10)
                clock += "0";
            clock += month + "-";
            if (day < 10)
                clock += "0";
            clock += day + " ";
            if (hh < 10)
                clock += "0";
            clock += hh + ":";
            if (mm < 10) clock += '0';
            clock += mm + ":";
            if (ss < 10) clock += '0';
            clock += ss;
            return clock;
        }

        //==选择上传图片
        function uploadFile(_this, e) {
            var formData = new FormData($("#uploadForma")[0]) //创建一个forData
            formData.append('file', $('#uploadInput')[0].files[0]) //把file添加进去  name命名为img
            $.ajax({
                url: 'https://mp.jianguoes.com/api/mp/upload',
                data: formData,
                type: "POST",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {

                    if (data.errno != 0) {
                        _alert(data.errmsg);
                        return false;

                    }
                    $('.picUrl').val(data.data)
                    // imgNum++;
                    // fd.append("imgfile["+imgNum+"]", data.url);

                    $('#uploaderFiles1').before('<div class="Box"><img src="' + data.data + '" alt="" class="imgBox payimg"><img src="../../static/mobile/default/images/closeImg.png" alt=""  class="closeImg" onclick="closeImg(this)"></div>');
                    var test = $('.uploadBox .Box')
                    if ($('.uploadBox .Box').length > 2) {
                        $('.uploadBox .Box').eq(0).remove()
                    }

                },
                error: function() {
                    //失败
                }

            });

        }

        //==关闭图片
        function closeImg(obj) {
            // var id = $(obj).attr('data-id');
            $('.uploadBox .Box').eq(0).remove()
            $('.casePic').val('')
        }

        //确认上传
        var enter = 0;
        function enterpost() {
            if (enter > 0) {
                $.alert('请不要重复提交');
            }
            var data = $('#userform').toJson();
            enter = 1;
            $.ajax({
                type: "post",
                url: "https://mp.jianguoes.com/api/res/addTrain",
                contentType: "application/json",
                data: JSON.stringify(data),
                headers: {
                    token: $.cookie('code')
                },
                success: function(data) {
                    console.log(data)
                    if (data.errno != 0) {
                        $.alert(data.errmsg);
                        enter = 0;
                        return;
                    }
                    window.location.href = 'trainlist.html';
                },
                error: function() {
                    enter = 0;
                },
            })
        }
    </script>

    <!-- 启动加载 -->
    <script>
        $(function() {
            // 解决移动端浏览器 300 毫秒点击延迟问题
            FastClick.attach(document.body);

            // 初始化表单默认值
            $('input[name="trainTime"]').val(getDatetime());

            var fd = new FormData();
            var li = 0;
            var enter = 0;
            //上传图片
            $('#uploaderInput').click(function() {
                var that = $('#uploaderFiles');
                var html = '';
                _uplocalfunction = function(base64Img) {
                    //fd.append("imgfile", base64Img);
                    var box = $(that).children('li').length;
                    if (box >= 6) {
                        $.alert('最多上传6张图片');
                        return;
                    }
                    html = '<li class="weui-uploader__file" id="img' + li + '" style="background-image:url(' + base64Img + ')">\
                        <div class="del_btn">\
                            <img src="../../static/assets/images/icon_del.png" data-id="' + li + '" onclick="closeImg(this)" alt="">\
                                            </div>\
                                        </li >';

                    $('#uploaderFiles').append(html);

                    $('#picval').append('<input type="hidden" id="pics' + li + '" name="pics[]" value="' + base64Img + '">');
                    li += 1;
                }
            })

        });

        $(function() {
            // 页面加载时执行getLocation函数
            window.onload = getLocation;
            if (supportsGeoLocation()) {
                //alert("你的浏览器支持 GeoLocation.");
            } else {
                alert("不支持 GeoLocation.")
            }
            // 检测浏览器是否支持HTML5
            function supportsGeoLocation() {
                return !!navigator.geolocation;
            }
            // 单次位置请求执行的函数
            function getLocation() {
                navigator.geolocation.getCurrentPosition(mapIt, locationError);
            }
            //定位成功时，执行的函数
            function mapIt(position) {
                lon = position.coords.longitude;
                lat = position.coords.latitude;
                // latlon = latlon = lon + "," + lat;
                // console.log(latlon, 'jingweidu');
                // alert("您位置的经度是：" + lon + " 纬度是：" + lat);

                // 创建地理编码（地理解析器）实例
                var myGeo = new BMap.Geocoder();
                // 根据坐标得到地址描述    下面输入坐标。
                myGeo.getLocation(new BMap.Point(lon, lat), function(result) {
                    if (result) {
                        console.log(result);
                        $('input[name="addr"]').val(result.address);
                    }
                });
            }

            // 定位失败时，执行的函数
            function locationError(error) {
                console.log(error);
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        alert("无法定位.");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert("位置信息不可用.");
                        break;
                    case error.TIMEOUT:
                        alert("请求超时.");
                        break;
                    case error.UNKNOWN_ERROR:
                        alert("未知错误.");
                        break;
                }
            }
        })
    </script>
</body>

</html>